<template>
<view>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">会员卡</block>
	</cu-custom>	
	<empty-data src="/static/nocard.png" v-if="!list.length && load"></empty-data>
	<view class="list" v-if="list.length">
		<view v-for="item in list" :key="item.card_id" class="card">
			<view class="top" :style="{ backgroundColor: item.num_color }">
				<image :src="item.imgurl"></image>
				<view class="x">
					<view class="x-name">{{ item.name }}</view>
					<view class="x-shop">{{ item.shop_name }}</view>
				</view>
			</view>
			<view class="bottom">
				<view class="d">
					<view class="d-same padding-bottom-xs padding-top-xs"><image src="/static/type.png"></image><view><text>类型</text>{{ item.card_type }}</view></view>
					<view class="d-same padding-bottom-xs"><image src="/static/no.png"></image><view><text>编号</text>{{ item.card_number }}</view></view>
				</view>
				<view class="m" :style="{ color: item.num_color }">
					<text class="m-tag">&yen;</text>{{ item.can_withdraw_deposit }}
				</view>
			</view>
			<view class="detail">
				<view :class="{ act: item.show }">
					<view class="io">
						<navigator hover-class="none">
							<view class="padding-bottom-xs">消费总额</view>
							<view :style="{ color: item.num_color }">{{ item.consume }}</view>
						</navigator>
						<navigator hover-class="none" :url="'/assets/integral?card_id='+ item.card_id">
							<view class="padding-bottom-xs">剩余积分</view>
							<view :style="{ color: item.num_color }">{{ item.integral }}</view>
						</navigator>
						<navigator hover-class="none">
							<view class="padding-bottom-xs">剩余金额</view>
							<view :style="{ color: item.num_color }">{{ item.balance }}</view>
						</navigator>
					</view>					
				</view>
				<view :class="['arrow', { down: !item.show, up: item.show }]" @tap="showDetail(item)"></view>
			</view>
		</view>	
	</view>	
</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { VipCard, showCard, ScoreSign } from '@/common/api/users'
	export default {
		name: 'vipcard',
		data () {
			return {
				list: [],
				load: false,
				params: {
					user_id: '',
					customer_id: ''
				},
			}
		},
		computed: {
			...mapGetters([
				'shop',
				'userInfo'
			])
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList () { // 获取会员卡 Arrary
				if (!this.shop) {
					setTimeout(this.getList, 500)
					return
				}
				this.params.user_id = this.userInfo.id
				this.params.customer_id = this.shop.customer_id
				VipCard(Object.assign({}, this.params, { type: 1 })).then(res => {
					this.load = true
					if (res.length) {
						this.list = res.map(item => {
							item.can_withdraw_deposit = item.can_withdraw_deposit.toFixed(2)
							item.num_color = `#${item.num_color}` 
							item.show = false // 用于展示此卡显示信息的状态
							item.detail = false // 用于是否已展示此卡的信息
							item.consume = 0 // 消费总额
							item.integral = 0 // 积分
							item.balance = 0 // 余额
							return item
						})
					}
				})
			},
			showDetail (item) {
				if (!item.detail) { // 如果已经显示此卡的信息
					uni.showLoading({ mask: true })
					showCard(Object.assign({}, this.params, { card_id: item.card_id })).then(res => {
						uni.hideLoading()
						if (!res.code) {
							item.detail = item.show = true
							item.consume = `${(res.data.erp_score + res.data.member_consumes.total_consume).toFixed(2)}元`
							item.integral = res.data.remain_score + res.data.erp_score
							item.balance = `${res.data.member_consumes.remain_consume.toFixed(2)}元`
						} else {
							uni.showModal({
								content: res.message,
								showCancel: false
							})
						}
					})
				} else {
					item.show = !item.show
				}
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../common/styles/variables.less';	
.list {
	padding: 15upx 0 0 0;
	.card {
		padding-bottom: 15upx;
		.top, .bottom, .detail { margin: 0 20upx 0 20upx; }
		.top {
			overflow: hidden;
			position: relative;
			background-color:red;
			border-top-right-radius: 10upx;
			border-top-left-radius: 10upx;
			&::before {
				content: '';
				width: 100%;
				height: 30upx;
				left: 0;
				position: absolute;
				background-image: radial-gradient(#fff 35%,transparent 35%);
				background-size: 30upx 30upx;
				background-position: 0;
				background-repeat: repeat-x;
				bottom: -15upx;
			}
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15upx 20upx 30upx;
			box-sizing: border-box;
			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				overflow: hidden;
				display: block;
			}
			.x {
				text-align: right;
				color:white;				
				&-name {
					font-size:@title;
				}
				&-shop {
					font-size:@minSize;
					opacity: .7
				}
			}
		}
		.bottom {
			background-color:white;
			padding: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.d {
				&-same {
					display: flex;
					align-items: center;
					image {
						width: 30upx;
						height: 30upx;
						display: inline-block;
						margin-right: 10upx;
					}
					& > view {
						font-size:@minSize;
						color:@gray;
						& > text {
							padding-right: 12upx;
						}
					}
				}
			}
			.m {
				font-weight: 600;
				font-size:40upx;
				&-tag {
					font-size:@minSize;
					padding-right: 6upx;
				}
			}
			.border-bottom;
		}
		.detail {
			background-color:white;					
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			& > view {
				&:first-of-type {
					max-height: 0;
					overflow: hidden;
					will-change: max-height;
					transition:.4s;
					&.act {
						max-height:140upx;
					}
				}
			}
			.io {
			    padding: 26upx 0;				
				display: flex;
				align-items: center;
				.border-bottom;				
				& > navigator {
					flex: 1;
					position: relative;
					&:nth-of-type(2) {
						.arrowRight;
					}
					&:not(:last-of-type) {
						&::after {
							position: absolute;
							content: '';
							top: 0;
							right: 0;
							border-right: 1px solid #f7f7f7;
							height: 100%;
						}						
					}
					& > view {
						text-align: center;
						font-size:22upx;
						color:@gray;
						&:last-of-type {
							font-weight: bold;
						}
					}
				}
			}
			.arrow {
				position: relative;
				height: 70upx;
				.arrowRight;
				&::before {
					left: 0;
					transition-duration: .4s;
					will-change: transform;
				}
				&.down {
					&::before {
						transform: translate3d(50%, 0, 0) rotate(-90deg);
					}
				}
				&.up {
					&::before {
						transform: translate3d(50%, 0, 0) rotate(90deg);
					}
				}
			}
		}
	}	
}
</style>
